<template>
	<div class="content">
		<common-head :showIcon="false" :showBackButton="true"></common-head>
		<div class="container">
			<div class="parking-card-container">
				<div class="title">
					<h3>无牌车</h3>
				</div>
				<van-card class="parking-card" :thumb="null">
					<template #tags>
						<div class="parking-info">
							<p>停车点：{{ message.parkingId }}</p>
							<p>泊位：{{ message.carportCode }}</p>
							<p>进场时间：{{ message.startTime }}</p>
						</div>
					</template>
					<template #footer>
						<van-button type="primary" block class="create-btn" @click="createOrder">
							创建订单并打印小票
						</van-button>
					</template>
				</van-card>
			</div>
		</div>

	</div>
</template>

<script>
	import commonHead from "../../components/xc/commonHead.vue";
	export default {
		components: {
			commonHead
		},
		data() {
			return {
				message: {
					parkingId: "",
					carportCode: "",
					startTime: ""
				}
			};
		},
		created() {
			if(this.$route.params.message)
				this.message = this.$route.params.message
		},
		methods: {
			createOrder() {
				this.$router.push({
					name: "CreateOrder", // 使用路由配置中定义的名称
					query: {
						parking_spot: this.message.parkingId,
						berth: this.message.carportCode
					}
				});
			}
		}
	};
</script>

<style scoped>
	.content {
		height: 100vh;
	}

	.container {
		height: 100%;
		width: 100%;
		padding: 10px;
		background-image: linear-gradient(to right, #cee7ff, #a5d3ff);
	}

	/* .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
} */
	.title {
		margin: 10px;
		font-weight: 700;
	}

	/* .title {
  margin-left: 0.3rem;
  margin-top: 0.4rem;
} */

	.parking-card-container {
		padding: 10px;
		background-color: white;
		height: 100%;
	}

	.parking-card {
		background-color: #e6f2ff;
		border-radius: 5px;
		overflow: hidden;
		height: 90%;
		/* height: 18.8rem; */
	}

	.parking-info {
		margin: 10px 0;
		font-size: 0.2rem;
		color: #666;
	}

	.parking-info p {
		margin: 5px 0;
	}

	.create-btn {
		width: 100%;
		background-color: #4080ff;
		border-color: #4080ff;
		border-radius: 4px;
		margin-top: 10px;
	}
</style>